/*
 * @Author: 赵天天
 * @Date: 2019-04-02 16:10:27
 * @LastEditors: 赵天天
 * @LastEditTime: 2019-05-20 15:07:55
 * @email: dayday_1996@163.com
 * @Descripttion: 系统整体评分动态分数
 */

export default function toCanvas (id, progress, tocolor) {
  // canvas进度条
  var canvas = document.getElementById(id)

  var ctx = canvas.getContext('2d')

  var percent = progress
  // 最终百分比

  var circleX = canvas.width / 2
  // 中心x坐标

  var circleY = canvas.height / 2
  // 中心y坐标

  var fontSize = 72 // 字体大小
  var start1 = 0
  function cubicEaseOut (t, b, c, d) {
    return c * ((t = t / d - 1) * t * t + 1) + b
  };
  //  刷新
  function loading () {
    if (process >= percent) {
      clearInterval(circleLoading)
    }
    //  清除canvas内容
    ctx.clearRect(0, 0, circleX * 2, circleY * 2)
    //    中间的字
    ctx.font = fontSize + 'px Microsoft YaHei'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    // ctx.fontFamily = ''
    var rbb = cubicEaseOut(start1, 255, tocolor[0] - 255, 200)
    var g = cubicEaseOut(start1, 51, tocolor[1] - 51, 200)
    var b = cubicEaseOut(start1, 51, tocolor[2] - 51, 200)
    start1++
    ctx.fillStyle = 'rgb(' + [parseInt(rbb), parseInt(g), parseInt(b)].join() + ')'
    ctx.fillText(parseFloat(process).toFixed(0), circleX, circleY)
    if (process / percent > 0.90) {
      process += 0.30
    } else if (process / percent > 0.80) {
      process += 0.55
    } else if (process / percent > 0.70) {
      process += 0.75
    } else {
      process += 1.0
    }
  }

  var process = 0.0 // 进度
  var circleLoading = window.setInterval(function () {
    loading()
  }, 20)
  // 5秒后 去掉上面的定时器
  var t1 = window.setTimeout(refreshCount, 1000 * 3)
  function refreshCount () {
    window.clearInterval(circleLoading)
  }
  // 去掉定时器的方法
  window.clearTimeout(t1)
}
